<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="down_pen">
    <!---------------------------|导航树 -->
    <div class="down_pen_left">
      <NAnchor :show-rail="false" ref="anchorRef" style="z-index: 1"
        v-for="(PenContainerItem, PenContainerIndex) in penContainer" :key="PenContainerIndex">
        <NAnchorLink :title="PenContainerItem.label" :href="'#' + PenContainerItem.key"
          @click.stop="onSelectedPenContainer(PenContainerItem)" />
      </NAnchor>
    </div>
    <!---------------------------|工具按钮 -->
    <div class="down_pen_tool">
      <div style="width: 5px"></div>
      <div class="h_flex_column_around">
        <!-- 导入笔筒 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
              viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('fileLeadingInIcon')"
              @click="onOpenFileDialog()"></svg>
          </template>
          <span>导入笔筒</span>
        </NTooltip>
        <!-- 导出笔筒 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg class="h_svg_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
              viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('fileLeadingOutIcon')" @click="onLeadOutJSON()"></svg>
          </template>
          <span>导出笔筒</span>
        </NTooltip>
      </div>
      <div style="width: 20px"></div>
      <div class="h_flex_column_around">
        <!-- 下载 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
              viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('dataSetGetIcon')"
              @click.stop="onPenContainerGet()"></svg>
          </template>
          <span>下载笔筒</span>
        </NTooltip>
        <!-- 上载 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
              viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('dataSetSaveIcon')"
              @click.stop="onPenContainerSave()"></svg>
          </template>
          <span>上载笔筒</span>
        </NTooltip>
        <!-- 新建 -->
        <NTooltip placement="bottom" trigger="hover">
          <template #trigger>
            <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize" :height="IconSize"
              viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('dataSetAddIcon')"
              @click.stop="onPenContainerAdd()"></svg>
          </template>
          <span>新建笔筒</span>
        </NTooltip>
      </div>
      <div style="width: 20px"></div>
    </div>
    <!---------------------------|属性 -->
    <div class="down_pen_right">
      <div class="h_table_down">
        <!-- 表格头 -->
        <div class="h_flex_column" v-for="(PenContainerItem, PenContainerIndex) in penContainer" :key="PenContainerIndex">
          <!-- 表格名称 -->
          <div :id="PenContainerItem.key" class="h_pen_down_pen_neme">
            <!-- 画笔名称 -->
            <div class="h_info" @click.stop="onSelectedPenContainer(PenContainerItem)">
              <text class="h_info_lable">笔筒名称</text>
              <NInput class="h_info_val" type="text" v-model:value="PenContainerItem.label" placeholder="未选择，请选择画笔" />
              <!-- 删除笔筒 -->
              <div style="width: 20px"></div>
              <NTooltip placement="bottom" trigger="hover">
                <template #trigger>
                  <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize"
                    :height="IconSize" viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('dataSetDeleteIcon')"
                    @click.stop="onPenContainerDelete(PenContainerItem.key)"></svg>
                </template>
                <span>删除笔筒</span>
              </NTooltip>
              <!-- 插入笔 -->
              <div style="width: 20px"></div>
              <NTooltip placement="bottom" trigger="hover">
                <template #trigger>
                  <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize"
                    :height="IconSize" viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('dataInsertIcon')"
                    @click.stop="onPenInsert()"></svg>
                </template>
                <span>插入笔</span>
              </NTooltip>
              <!-- 新建笔 -->
              <div style="width: 20px"></div>
              <NTooltip placement="bottom" trigger="hover">
                <template #trigger>
                  <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize"
                    :height="IconSize" viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('dataNewIcon')"
                    @click.stop="onCreatePen(PenContainerItem.key)"></svg>
                </template>
                <span>新建笔</span>
              </NTooltip>
            </div>
          </div>
          <!-- 表格头 -->
          <div class="h_table_top">
            <div class="h_pen_row h_flex_row_between" v-show="Object.keys(PenContainerItem.children).length !== 0">
              <div class="h_flex2">名称</div>
              <div class="h_flex1">颜色</div>
              <div class="h_flex1">填充</div>
              <div class="h_flex1">宽度</div>
              <div class="h_flex1">透明度</div>
              <div class="h_flex1">操作</div>
            </div>
          </div>
          <!-- 表格 -->
          <div class="h_flex_column_center">
            <div class="h_pen_row h_flex_row_between" v-for="(Pen, index) in PenContainerItem.children" :key="index"
              @click.stop="onSelectedPen(Pen)">
              <div class="h_pen_row_item h_flex2">{{ Pen.label }}</div>
              <div class="h_pen_row_item h_flex1" :style="{ 'background-color': Pen.stroke }"></div>
              <div class="h_pen_row_item h_flex1" :style="{ 'background-color': Pen.fill }"></div>
              <div class="h_pen_row_item h_flex1">{{ Pen.stroke_width }}</div>
              <div class="h_pen_row_item h_flex1">{{ Pen.opacity }}</div>
              <div class="h_pen_row_item h_flex1 h_flex_row_between">
                <!-- 剪切笔 -->
                <div style="width: 20px"></div>
                <NTooltip placement="bottom" trigger="hover">
                  <template #trigger>
                    <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize"
                      :height="IconSize" viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('dataCutIcon')"
                      @click.stop="onPenCut(Pen.key)"></svg>
                  </template>
                  <span>剪切笔</span>
                </NTooltip>
                <!-- 复制笔 -->
                <div style="width: 20px"></div>
                <NTooltip placement="bottom" trigger="hover">
                  <template #trigger>
                    <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize"
                      :height="IconSize" viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('dataCopyIcon')"
                      @click.stop="onPenCopy"></svg>
                  </template>
                  <span>复制笔</span>
                </NTooltip>
                <!-- 删除笔 -->
                <div style="width: 20px"></div>
                <NTooltip placement="bottom" trigger="hover">
                  <template #trigger>
                    <svg class="h_tool_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" :width="IconSize"
                      :height="IconSize" viewBox="0 0 1024 1024" v-html="onGetDataManagerIcon('dataDeleteIcon')"
                      @click.stop="onPenDelete(Pen.key)"></svg>
                  </template>
                  <span>删除笔</span>
                </NTooltip>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 文件导入 -->
    <input type="file" style="display: none" ref="fileRef" @change="onLeadingIn" />
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { reactive, ref, toRefs, computed, watch, nextTick, onMounted } from "vue";
// import { NInput, NSelect, NColorPicker } from "naive-ui";
import { saveAs } from "file-saver";
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onGetDataManagerIcon,
  onSelectedPenContainer,
  onSelectedPen,
  onPenContainerGet,
  onPenContainerSave,
  onPenContainerAdd,
  onPenContainerDelete,
  onPenCut,
  onPenCopy,
  onPenInsert,
  onPenDelete,
  onCreatePen,
} from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"; // 画布

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布

/* ================================================================================================ */
//                                 ★变量
/* ================================================================================================ */
/** 笔筒 */
let penContainer = computed(() => canvasStore.penContainer);
/** 图标尺寸 */
const IconSize = 36;
/** 文件参数 */
let fileRef = ref();

/* ================================================================================================ */
//                                函数 ★
/* ================================================================================================ */

/** 打开文件对话框 */
const onOpenFileDialog = () => {
 // console.log("打开文件对话框");
 // console.log(fileRef.value);
  fileRef.value.dispatchEvent(new MouseEvent("click"));
};

/**  导入 */
const onLeadingIn = async () => {
 // console.log("图元数据-导入");
 // console.log(fileRef)
 // console.log(fileRef.value.files[0])
  // 读取文件
  const file = fileRef.value.files[0];
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = () => {
    // 解析JSON
    const jsonData = JSON.parse(reader.result);
   // console.log(jsonData);
    if (jsonData.type === "penContainer") {
      canvasStore.penContainer = jsonData.penContainer;
      canvasStore.tips = "成功导入笔筒";
    } else {
      canvasStore.tips = "文件错误";
    }
  };
};

/** 导出 */
const onLeadOutJSON = () => {
 // console.log("导出笔筒");

  // ◆ 建立-保存时间
  let time = new Date();
  let Calendar: string =
    time.getFullYear() +
    "年" +
    time.getMonth() +
    "月" +
    time.getDate() +
    "日" +
    time.getHours() +
    "时" +
    time.getMinutes() +
    "分" +
    time.getSeconds() +
    "秒" +
    time.getMilliseconds() +
    "毫秒";
  let penContainer = {
    calendar: Calendar,
    type: "penContainer",
    penContainer: canvasStore.penContainer,
  };
 // console.log(CurrentProject)
  // 将JSON数据转换为Blob对象
  const blob = new Blob([JSON.stringify(penContainer)], {
    type: "application/json;charset=utf-8",
  });
  // 使用FileSaver.js保存Blob对象为JSON文件
  saveAs(blob, "传鸿组态_笔筒.json");
};
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";
// 嵌入板_笔筒
.down_pen {
  width: 100%;
  max-height: 250px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  background-color: rgb(80,80,80);
  overflow: hidden;
  user-select: none;

  //笔筒导航
  .down_pen_left {
    width: 160px;
    height: 250px;
    overflow-y: scroll;
    /* firefox */
    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
    scrollbar-width: auto;

    /* chrome */
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgb(197, 197, 197);
    }
  }

  //工具
  .down_pen_tool {
    margin: 10px;
    display: flex;
    flex-direction: row;

    justify-content: space-around;
  }

  //笔筒详情
  .down_pen_right {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
}

// 表格头
.h_table_top {
  // margin-left: 15px;
  // margin-right: 15px;
  height: 20px;
}

// 表格内容
.h_table_down {
  flex: 1;
  overflow: auto;
  /* firefox */
  scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
  scrollbar-width: auto;

  /* chrome */
  &::-webkit-scrollbar,
  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgb(197, 197, 197);
  }
}

// 笔筒名称
.h_pen_down_pen_neme {
  margin-top: 5px;
  width: 100%;
  display: flex;
  flex-direction: row;

  &:hover {
    background-color: rgb(0, 0, 255);
    color: rgb(255, 255, 255);
  }
}

//画笔
.h_table_content {
  padding: 0px;
  margin: 0px;

  :hover {
    background-color: rgb(0, 0, 255);
    color: rgb(255, 255, 255);
  }
}

.h_pen_row {
  padding: 0px;
  margin: 0px;

  .h_pen_row_item {
    width: 100%;
    border: 1px solid rgb(175, 175, 175);
    text-align: center;
  }
}

// 锚点链接

/* 参数 */
.h_info {
  padding: 5px;
  width: 100%;
  user-select: none;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

/* 参数标题 */
.h_info_lable {
  padding-left: 3px;
  width: 80px;
}

/* 参数变量 */
.h_info_val {
  width: 100%;
  margin-right: 16px;
}
</style>
